import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
import {Button} from "@/components/ui/button";
import {GripVertical} from "lucide-react";
import FormAssembly from "@/components/form-assembly";
import {OTHERS} from "@/lib/constants";

const Others = ({data, pIndex, detailData, setDetailData}: any) => {
    const module = OTHERS[data?.type]

    // 修改值
    const handleValueChange = (value: string) => {
        const res = [...detailData]
        res[pIndex].value = value
        setDetailData(res)
    }

    return (
        <Card className={'border-none shadow-sm rounded-none'}>
            <CardHeader>
                <div className={'flex justify-between items-center'}>
                    <div className={'flex justify-center items-center'}>
                        <Button className={'w-8 h-8 mr-1'} variant="ghost" size="icon">
                            <GripVertical size={16}/>
                        </Button>
                        <CardTitle>
                            {data?.title}
                        </CardTitle>
                    </div>
                </div>
            </CardHeader>
            <CardContent className={'space-y-4'}>
                <FormAssembly
                    value={data?.value}
                    {...module}
                    change={(value: any) => {
                        handleValueChange(value)
                    }}
                />
            </CardContent>
        </Card>
    )
}

export default Others;